
<%@ page import="com.afb.HHPredJob" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'HHPredJob.label', default: 'HHPredJob')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>
        
<style type="text/css">

* {margin:0; padding:0}
/*
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF}
*/
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}



</style>

<script type="text/javascript">

var tooltip=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();

</script>

<script type="text/javascript">
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide";
	}
}

</script>

<script type="text/javascript" src="${createLinkTo(dir:'js',file:'jquery-1.4.3.js')}">
</script>
<script type="text/javascript">
$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>


    </head>


    <body>

        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>

            <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>

        </div>


        <div class="body">


            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>

<div id="tabs" class="container">

            <h1>${fieldValue(bean: HHPredJobInstance, field: "name")}</h1>

        <g:if test="${HHPredJobInstance.status != 'processing'}">
            <b><g:message code="default.search.label" />  </b><span class="hotspot" onmouseover="tooltip.show('<strong>Insert query terms</strong><br />Insert query terms comma separated. <BR/> For Example: \'Tubulin,FtsZ\'');" onmouseout="tooltip.hide();">?</span>

            <g:form action="search" method="post" id="${HHPredJobInstance.id}">
                <g:textField name="search" value="${params.search}" size="150"/>
                <input type="submit" value="Search" />
            </g:form>

        </g:if>

<br/>
    <ul class="tabs">
      <li><a href="#tab2">Processes</a></li>
        <li><a href="#tab1">Configurations</a></li>
    </ul>
    <div class="tab_container">

        <div id="tab2" class="tab_content">

<br/>
            <div class="list">
                <table>
                    <thead>
                        <tr>
<!--
                            <g:sortableColumn property="id" title="${message(code: 'Process.id.label', default: 'Id')}" />
-->

<!--
                            <g:sortableColumn property="input" title="${message(code: 'Process.input.label', default: 'Input')}" />
-->

                            <g:sortableColumn property="name" title="${message(code: 'Process.name.label', default: 'Name')}" />

                            <g:sortableColumn property="description" title="${message(code: 'Process.description.label', default: 'Description')}" />

                            <g:sortableColumn property="status" title="${message(code: 'Process.status.label', default: 'Status')}" />
<!--
                            <g:sortableColumn property="input" title="${message(code: 'Process.input.label', default: 'Input')}" />

                            <g:sortableColumn property="output" title="${message(code: 'Process.output.label', default: 'Output')}" />
-->



                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${processInstanceList}" status="i" var="processInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<!--
                            <td><g:link action="process" id="${processInstance.id}">${fieldValue(bean: processInstance, field: "id")}</g:link></td>
-->

                            <td><g:link action="process" id="${processInstance.id}">${fieldValue(bean: processInstance, field: "name")}</g:link></td>
<!--
                            <td>${fieldValue(bean: processInstance, field: "name")}</td>
-->
                            <td>${fieldValue(bean: processInstance, field: "description")}</td>

<td>
<g:if test="${processInstance.status=='queued'}">
  <font color="blue">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='processing'}">
  <font color="yellow">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='finished'}">
     <font color="green">${fieldValue(bean: processInstance, field: "status")}
</font>
</g:if>
<g:if test="${processInstance.status=='error'}">
  <font color="red">${fieldValue(bean: processInstance, field: "status")}
<!--
    <g:link controller="HHPredJob" action="retry" id="${processInstance.id}">cxRetry</g:link>
-->
</font>
</g:if>
                            </td>
<!--
                            <td>${fieldValue(bean: processInstance, field: "input")}</td>
--->
<!--
                            <td><g:link action="input" id="${processInstance.id}">View</g:link></td>

                            <td><g:link action="output" id="${processInstance.id}"><g:if test="${processInstance.output != ''}">View</g:if></g:link></td>
-->



                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>
<!--
            <div class="paginateButtons">
                <g:paginate total="${processInstanceTotal}" />
            </div>
-->

        </div>

        <div id="tab1" class="tab_content">
<!--
            <h2>Job</h2>
-->
<br/>

            <div class="dialog">
                <div class="tabberlive">

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>Description </label>
			</div>

                   <div class="tabbertab">
                <table>
                    <tbody>
                    

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.name.label" default="Name" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "name")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.description.label" default="Description" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "description")}</td>

                        </tr>
                        </tbody>
                   </table>
                   </div>
<br/>

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>Options </label>
			</div>


                   <div class="tabbertab">

                <table>
                    <tbody>
                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.proteinSequences.label" default="Protein Sequences" /></td>
<!--
                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "proteinSequences")}</td>
-->
                            <td valign="top" class="value">
<!--
                            <g:textArea readonly id="styled" name="proteinSequences" cols="100" rows="10" value="${HHPredJobInstance?.proteinSequences}"/>
-->
                            <textArea id="styled" name="proteinSequences" cols="100" rows="10" value="" readonly>${HHPredJobInstance?.proteinSequences}</textArea>
                            </td>


                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.hmmDatabases.label" default="Hmm Databases" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "hmmDatabases")}</td>

                        </tr>


                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.maxPairWiseSeqId.label" default="Max Pairwise Sequence ID" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "maxPairWiseSeqId")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.diff.label" default="Most Diverse Set of Sequences" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "diff")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.cov.label" default="Min. Coverage with Query" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "cov")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.qid.label" default="Min. Sequence Identity" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "qid")}</td>

                        </tr>                        
                        
                        
                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.qsc.label" default="Min. Score per column" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "qsc")}</td>

                        </tr>





  </tbody>
</table>
</div>

</div>


<br/>
			<div id="barra" class="barra" style="background-color:#ff9900;text-align:left;padding-left:20px">
                          <label> More options </label><a id="displayText" href="javascript:toggle();"> Show</a>
			</div>
<br/>

<div id="toggleText" style="display: none">


  <br/>

			<div id="barratitulo" class="barra" style="background-color:#F8F8F8;text-align:left;padding-left:20px">
                          <label>More Options </label>
			</div>


                   <div class="tabbertab">


  <table>
<tbody>



                          <!-- Output Options -->
                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.aliw.label" default="Number of Columns per Line" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "aliw")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.p.label" default="Minimum Probability" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "p")}</td>

                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.e.label" default="Maximum E-value" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "e")}</td>

                        </tr>


                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.zmax.label" default="Maximum Number of lines" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "zmax")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.zmin.label" default="Minimum Number of lines" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "zmin")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.bmax.label" default="Maximum Number of alignment" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "bmax")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.bmin.label" default="Minimum Number of alignment" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "bmin")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.realign.label" default="Realign" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "realign")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.mact.label" default="MAC re-alignment" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "mact")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.globloc.label" default="Alignment mode " /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "globloc")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.alt.label" default="Alternative Alignments " /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "alt")}</td>
                        </tr>

                        <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.shift.label" default="Score Off-Set" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "shift")}</td>
                        </tr>


                       <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.corr.label" default="Weight of Term" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "corr")}</td>
                        </tr>

                       <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.ssm.label" default="SS Scoring" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "ssm")}</td>
                        </tr>

                       <tr class="prop">
                            <td valign="top" class="name"><g:message code="HHPredJob.ssw.label" default="Weight SS Scoring" /></td>

                            <td valign="top" class="value">${fieldValue(bean: HHPredJobInstance, field: "ssw")}</td>
                        </tr>





<g:ifUserHasRole roles="Administrator">
                            <tr class="prop">
</g:ifUserHasRole>
<g:ifUserHasRole roles="Registered">
                            <tr id="notvisible" class="prop">
</g:ifUserHasRole>
                            <td valign="top" class="name"><g:message code="HHPredJob.user.label" default="User" /></td>

                            <td valign="top" class="value"><g:link controller="user" action="show" id="${HHPredJobInstance?.user?.id}">${HHPredJobInstance?.user?.encodeAsHTML()}</g:link></td>

                        </tr>

                    </tbody>
                </table>
  </div>
  </div>

            </div>



        </div>


      </div>

    </div>
&nbsp;
</div>

    </body>
</html>
